<!--  -->
<template>
  <div class="edit-wrap">
    <div class="layui-form-item layui-form-text">
      <div class="layui-iput-block">
        <div class="layui-unselect fly-edit">
          <!-- <span><i class="iconfont icon-yxj-expression" @click="isShowmote()"></i></span> -->
          <span
            ><i
              class="iconfont icon-yxj-expression"
              @click="isShowmote"
              ref="face"
            ></i
          ></span>
          <label for="pic">
            <span
              ><i class="iconfont icon-tupian">
                <input
                  id="pic"
                  type="file"
                  name="file"
                  accept="image/*"
                  @change="upload"
                /> </i
            ></span>
          </label>
          <span
            ><i class="iconfont icon-lianjie" @click="isShowlink" ref="link"></i
          ></span>
          <!-- <span><i class="iconfont icon-lianjie" @click= "isShowlink"></i></span> -->
          <span class="quote" @click="isShowquote" ref="quote">"</span>
          <span
            ><i
              class="iconfont icon-emwdaima"
              @click="isShowcode"
              ref="code"
            ></i
          ></span>
          <span @click="addhr">hr</span>
          <span><i class="iconfont icon-yulan1" @click="isShowview"></i></span>
        </div>
        <!-- <textarea id="edit" class="layui-textarea fly-editor" name="content" v-model="textarea" @focus="focusEvent()" @blur="blurEvent()">
            
            </textarea> -->
        <textarea
          id="edit"
          class="layui-textarea fly-editor"
          name="content"
          v-model="content"
          @focus="focusEvent()"
          @blur="blurEvent()"
        >
        </textarea>
      </div>
    </div>
    <!-- <face v-show="isshowmote" @checkmojo="meojis" ></face> -->
    <face
      :isshowmote="isshowmote"
      @closeEvent="
        () => {
          this.isshowmote = false
        }
      "
      :ctrl="this.$refs.face"
      @checkmojo="meojis"
    ></face>
    <link-add
      :isshowlink="isshowlink"
      :ctrl="this.$refs.link"
      @closeLink="
        () => {
          this.isshowlink = false
        }
      "
      @gettext="gettext"
    ></link-add>
    <!-- <link-add :isshowlink="isshowlink" ></link-add> -->
    <quote-add
      :isshowquote="isshowquote"
      :ctrl="this.$refs.quote"
      @closequote="
        () => {
          isshowquote = false
        }
      "
      @getquote="getquote"
    ></quote-add>
    <code-add
      :isshowcode="isshowcode"
      :ctrl="this.$refs.code"
      @closecode="
        () => {
          isshowcode = false
        }
      "
      @getcode="getcode"
    ></code-add>
    <pre-view
      :isshowview="isshowview"
      :content="content"
      :ctrl="this.$refs.view"
      @closeview="
        () => {
          isshowview = false
        }
      "
      @getcode="getcode"
    ></pre-view>
  </div>
</template>

<script>
import Face from "./Face";
// import Face from './Face2'
import { uploadImg } from "@/api/content";
import config from "@/config";
import LinkAdd from "./LinkAdd";
import QuoteAdd from "./QuoteAdd";
import CodeAdd from "./CodeAdd";
import PreView from "./PreView";
export default {
  name: "Editor",
  components: {
    Face,
    LinkAdd,
    QuoteAdd,
    CodeAdd,
    PreView,
  },
  props: {
    initContent: {
      default: ''
    }
  },
  data () {
    return {
      text: "",
      moji: "",
      pic: "",
      quote: "",
      code: "",
      pos: "",
      content: "",
      //   textarea: [],
      imgage: [],
      isshowmote: false,
      isshowlink: false,
      isshowquote: false,
      isshowcode: false,
      isshowview: false,
    };
  },
  updated () {
    this.$emit("changeContent", this.content);
  },

  computed: {},
  watch: {
    initContent (newval, oldval) {
      this.content = this.initContent
    }
  },
  methods: {
    //添加表情
    meojis (moji) {
      // this.moji = moji
      // console.log(moji);
      const insertContent = ` face${moji}`;
      this.insert(insertContent);
      this.pos += insertContent.length;
      // this.textarea =   this.textarea.concat('face' + this.moji)
    },
    focusEvent () {
      this.getPos();
      //     console.log('sss');
    },
    blurEvent () {
      this.getPos();
    },
    //计算光标位置
    getPos () {
      let cursorPos = 0;
      let elem = document.getElementById("edit");
      if (document.selection) {
        //ie
        let selectRange = document.selection.createRange();
        selectRange.moveStart("character", -elem.value.length);
        cursorPos = selectRange.text.length;
      } else if (elem.selectionStart || elem.selectionStart === "0") {
        cursorPos = elem.selectionStart;
      }
      this.pos = cursorPos;
    },
    insert (val) {
      if (typeof this.content === "undefined") {
        return;
      }
      let tmp = this.content.split("");
      tmp.splice(this.pos, 0, val);
      this.content = tmp.join("");
    },
    gettext (text) {
      const insertContent = `a(${text})[${text}]`;
      this.insert(insertContent);
      this.pos += insertContent.length;
    },
    getquote (quote) {
      const insertContent = `\n[quote]\n${quote}\n[/quote]`;
      this.insert(insertContent);
      this.pos += insertContent.length;
    },
    getcode (code) {
      const insertContent = `\n[pre]${code}\n[/pre]`;
      this.insert(insertContent);
      this.pos += insertContent.length;
    },
    isShowmote () {
      this.isshowmote = !this.isshowmote;
    },
    isShowlink () {
      this.isshowlink = !this.isshowlink;
    },
    isShowquote () {
      this.isshowquote = !this.isshowquote;
    },
    isShowcode () {
      this.isshowcode = !this.isshowcode;
    },
    isShowview () {
      this.isshowview = !this.isshowview;
    },
    // content(){
    //     content = this.content
    // },
    upload (e) {
      const file = e.target.files;
      const formData = new FormData();
      if (file.length > 0) {
        formData.append("file", file[0]);
        this.formData = formData;
      }
      //上传图片
      uploadImg(this.formData).then((res) => {
        // console.log(res.data);
        if (res.code === 200) {
          const baseUrl =
            process.env.NODE_ENV === "production"
              ? config.baseUrl.pro
              : config.baseUrl.dev;
          const insertContent = `img[${baseUrl + res.data}]`;
          this.insert(insertContent);
          this.pos += insertContent.length;
          // this.textarea = this.textarea.concat('image'+'['+ baseUrl + res.data + ']')
          document.getElementById("pic").value = "";
        }
      });
    },
    addhr () {
      // this.textarea = this.textarea.concat("[" + "hr" + "]");
      this.insert("\n[hr]");
      this.pos += 5;
    },
  },
};
</script>
<style scoped lang="scss">
.fly-editor {
  height: 260px;
  position: relative;
}
.edit-wrap {
  position: relative;
}
.quote {
  font-size: 12px;
  vertical-align: middle;
  position: relative;
  top: 4px;
}
#pic {
  display: none;
}
</style>
